import React, { useState, useRef, useEffect } from 'react'
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space, Radio } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { modifyUserApi, getUserApi, mrbirdApi, getCurUserApi } from '../api/user';


import '../assets/styles/personal.css'
export default function PersonalCenter() {
    // const [value, setValue] = useState(1);
    // const onChange = (e) => {
    //     console.log('radio checked', e.target.value);
    //     setValue(e.target.value);
    // };
    const [curUser, setCurUser] = useState({})
    const getEmail = useRef()
    const getMobile = useRef()
    const FormRef = useRef()
    const userinfo = JSON.parse(localStorage.user)
    // console.log(userinfo);
    // const { username, status, roleId, userId, deptId } = userinfo
    const { username, status, roleId, userId, deptId } = userinfo
    function sex() {
        switch (userinfo.ssex) {
            case '0':
                return '女'
            case '1':
                return '男'
            case '2':
                return '保密'
            default:
                return '性别有误！'
        }
    }

    const { Option } = Select;
    const [open, setOpen] = useState(false);
    const [initialValues, setInitialValues] = useState({})
    const showDrawer = () => {
        setOpen(true);
        setInitialValues({
            email: userinfo.email,
            mobile: userinfo.mobile,
            deptName: userinfo.deptName,
            ssex: userinfo.ssex,
            description: userinfo.description
        })
    };
    const onClose = (values) => {
        const email = values.email
        const ssex = values.ssex
        const description = values.description
        const mobile = values.mobile
        const deptId = values.deptName
        modifyUserApi(username, email, status, ssex, roleId, userId, deptId, description, mobile).then(res => {
            console.log(res, 1111111111);
        })
        setOpen(false);
    };




    return (
        <div className='personal_box'>
            <div className='personal_title'>
                <Button type="primary" onClick={showDrawer}>
                    编辑资料
                </Button>
                <Drawer
                    title="编辑资料"
                    width={620}
                    onClose={onClose}
                    open={open}
                    closable={false}

                    bodyStyle={{
                        paddingBottom: 80,
                    }}
                // extra={
                //     <Space>
                //         {/* <Button onClick={onClose}>取消</Button>
                //         <Button onClick={onClose} type="primary">
                //             保存
                //         </Button> */}
                //     </Space>
                // }
                >
                    <Form layout="vertical" hideRequiredMark onFinish={onClose} ref={FormRef} initialValues={initialValues}>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="email"
                                    label="邮箱："
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入您的邮箱',
                                        },
                                    ]}
                                >
                                    {/* ref={getEmail} */}
                                    <Input placeholder="请输入您的邮箱" ref={getEmail} />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="mobile"
                                    label="手机："
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入您的手机号',
                                        },
                                    ]}
                                >
                                    <Input placeholder="请输入您的手机号" />
                                </Form.Item>
                            </Col>
                        </Row>
                        {/* <Row gutter={6}> */}
                        <Col span={12}>
                            <Form.Item
                                name="deptName"
                                label="部门："
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入您所在部门',
                                    },
                                ]}
                            >
                                <Select placeholder="请输入您所在部门">
                                    <Option value="1">开发部</Option>
                                    <Option value="4">市场部</Option>
                                    <Option value="5">人事部</Option>
                                    <Option value="6">测试部</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        {/* </Row> */}


                        <Form.Item name="ssex" label="性别：">
                            <Radio.Group>
                                <Radio value="0">男</Radio>
                                <Radio value="1">女</Radio>
                                <Radio value="2">保密</Radio>
                            </Radio.Group>
                        </Form.Item>

                        {/* <Row gutter={16}> */}
                        <Col span={24}>
                            <Form.Item
                                name="description"
                                label="描述"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入描述',
                                    },
                                ]}
                            >
                                <Input.TextArea rows={4} placeholder="请输入对自己的描述" />
                            </Form.Item>
                        </Col>
                        {/* </Row> */}
                        <Button onClick={onClose}>取消</Button>
                        <Button onClick={onClose} htmlType="submit" type="primary">
                            保存
                        </Button>

                    </Form>
                </Drawer>
            </div>
            <div className='personal_main'>
                <div className='personal_main_left'>
                    <div className='personal_main_left_img'>
                        <img style={{ width: '160px', height: '160px' }} src={`http://xawn.f3322.net:8002/distremote/static/avatar/${userinfo.avatar}`} alt="头像" />
                    </div>
                    <Button style={{ marginRight: "20px" }} type="info" size='small'>修改头像</Button>
                </div>
                <div className='personal_main_right'>
                    <p>账户：{userinfo.username}</p>
                    <p>角色：{userinfo.roleName}</p>
                    <p>性别：{sex()}</p>
                    {/* <p>性别：{curUser.ssex}</p> */}
                    <p>电话：{userinfo.mobile}</p>
                    {/* <p>邮箱：{curUser.email}</p> */}
                    <p>邮箱：{userinfo.email}</p>
                    <p>部门：{userinfo.deptName}</p>
                    <p>描述：{userinfo.description}</p>
                </div>
            </div>



        </div>
    )
}
